<template>
	<xl-search-page 
		:types="types" 
		searchTip
		hotTip="热搜"
		:hotMode="hotMode"
		:hotData="hotData"
		@changeType="changeType"
		@search="handleSearch"
		@loadSearch="loadSearch"
	></xl-search-page>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	const types = ref(['商品','服务','门店'])
	const hotMode = ref('card')
	const hotData = ref(["电脑主板", "电脑屏幕"])
	
	const imageUrl = "https://gd-filems.dancf.com/gaoding/gaoding/65163/113308c7-93d0-42bc-9fbc-3a69af1b050f388058.jpg?x-oss-process=image/resize,w_2000,h_2000/interlace,1/format,avif"
	
	
	// 切换类型
	function changeType(type){
		if(type == '商品'){
			hotMode.value = 'card'
			hotData.value = ["电脑主板", "电脑屏幕"]
		}else if(type == '服务'){
			hotMode.value = 'capsule'
			hotData.value = ["空调清洗", "电脑维修"]
		}else if(type == '门店'){
			hotMode.value = 'card-image'
			hotData.value = [{
				img: imageUrl,
				name: '空调维修',
				desc: '空调维修描述'
			},{
				img: imageUrl,
				name: '洗衣机维修',
				desc: '洗衣机维修描述'
			}]
		}
	}
	
	// 执行搜索
	function handleSearch(opt){
	  console.log(opt)
	}
	
	// 加载搜索提示列表
	const remoteData = Array.from({length: 30}, (_, i) => "搜索列表" + i)
	function loadSearch(opt, update){
		const res = remoteData.filter(item => item.includes(opt.keywords))
		res.unshift(opt.type + opt.keywords + Math.random() * 100)
		update(res)
	}
	
</script>

<style scoped lang="scss">

</style>
